<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/WEB-INF/jsp/component/common.jsp" %>
<!DOCTYPE html>
<html>
<head>
    <title>导出Excel</title>
    <meta charset="utf-8">
    <!-- Bootstrap Core CSS -->
    <link href="${css}/bootstrap.min.css" rel="stylesheet"/>
    <!-- bootstrapValidator验证 -->
    <link href="${assets}/bootstrapValidator/css/bootstrapValidator.css" rel="stylesheet"/>

    <link href="${assets}/bootstrapFileInput/css/fileinput.css" media="all" rel="stylesheet" type="text/css" />
    <!--[if IE]>
    <script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script>
    <![endif]-->
</head>
<body style="width: 96%">

<form id="myForm" class="form-horizontal" action="${URL_ADM_COMMUNITY_EXPORT}" method="post" >
    <input type="hidden" id="areaCode" name="areaCode" />
    <div class="form-group">
        <div class="col-sm-12">
            <div style="float:left;" >由于地区信息过多，系统只支持最高单个</div><div style="color: red; float:left;" >市级</div><div>地区导出</div>
        </div>
    </div>
    <div class="form-group">
        <label for="cityArea" class="col-sm-1 control-label">地区</label>
        <div class="col-sm-3">
            <select id="largeArea" name="largeArea" class="form-control">
                <option value="">大区</option>
                <c:forEach items="${largeAreaList}" var="largeArea">
                    <option value="${largeArea.largeAreaCode}">${largeArea.largeAreaName}</option>
                </c:forEach>
            </select>
        </div>
        <div class="col-sm-3">
            <select id="provinceArea" name="provinceArea" class="form-control">
                <option value="">省</option>
            </select>
        </div>
        <div class="col-sm-3">
            <select id="cityArea" name="cityArea" class="form-control">
                <option value="">市</option>
            </select>
        </div>
    </div>
    <div class="form-group">
        <label for="countyArea" class="col-sm-1 control-label"></label>
        <div class="col-sm-3">
            <select id="countyArea" name="countyArea" class="form-control">
                <option value="">县</option>
            </select>
        </div>
        <div class="col-sm-3">
            <select id="townArea" name="townArea" class="form-control">
                <option value="">镇</option>
            </select>
        </div>
        <div class="col-sm-3">
            <select id="villageArea" name="villageArea" class="form-control">
                <option value="">村</option>
            </select>
        </div>
    </div>
    <div class="modal-footer" style="text-align: center ">
        <button type="button" class="btn btn-default" data-dismiss="modal" id="closeModalButt">关闭</button>
        <button type="submit" class="btn btn-primary">导出</button>
    </div>
</form>

<!-- jQuery -->
<script src="${js}/jquery-1.9.1.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="${js}/bootstrap.min.js"></script>

<script src="${js}/bootbox.js"></script>
<!-- bootstrapValidator验证 -->
<script src="${assets}/bootstrapValidator/js/bootstrapValidator.js"></script>
<!-- bootstrapValidator验证 国际化中文 -->
<script src="${assets}/bootstrapValidator/js/language/zh_CN.js"></script>

<script src="${assets}/bootstrapFileInput/js/fileinput.js" type="text/javascript"></script>
<script src="${assets}/bootstrapFileInput/js/fileinput_locale_zh.js" type="text/javascript"></script>

<script type="text/javascript">

    $(document).ready(function() {
        $("#largeArea").change(function() {
            if(this.value==null || this.value==""){
                resetArea(0);
            }else{
                getLowerAreaList("provinceArea",this.value,0);
                resetArea(1);
            }
            $("#areaCode").val(getDetailAreaCode());
        });
        $("#provinceArea").change(function() {
            if(this.value==null || this.value==""){
                resetArea(1);
            }else{
                getLowerAreaList("cityArea",this.value,1);
                resetArea(2);
            }
            $("#areaCode").val(getDetailAreaCode());
        });
        $("#cityArea").change(function() {
            if(this.value==null || this.value==""){
                resetArea(2);
            }else{
                getLowerAreaList("countyArea",this.value,2);
                resetArea(3);
            }
            $("#areaCode").val(getDetailAreaCode());
        });
        $("#countyArea").change(function() {
            if(this.value==null || this.value==""){
                resetArea(3);
            }else{
                getLowerAreaList("townArea",this.value,3);
                resetArea(4);
            }
            $("#areaCode").val(getDetailAreaCode());
        });
        $("#townArea").change(function() {
            if(this.value==null || this.value==""){
                resetArea(4);
            }else{
                getLowerAreaList("villageArea",this.value,4);
                resetArea(5);
            }
            $("#areaCode").val(getDetailAreaCode());
        });

        /**
         * 后台获取下级列表
         * */
        function getLowerAreaList(id,code,level){
            $.ajax({
                url:'${ctx}/area/getLowerAreaList',
                type:'post',
                data:'code='+code+"&level="+level,
                async : false, //默认为true 异步
                error:function(){
                    alert('error');
                },
                success:function(data){
                    var objs = document.getElementById(id);
                    objs.options.length = 1;
                    var area = data;
                    for(var i=0;i<area.length;i++){
                        var childOption = document.createElement("option");
                        childOption.value = area[i].code;
                        childOption.innerHTML = area[i].name;
                        objs.appendChild(childOption);
                    }
                }
            });
        }

        /**
         * 重置下级菜单
         * */
        function resetArea(level){
            if(level<1){
                var provinceArea = document.getElementById("provinceArea");
                provinceArea.options.length = 1;
            }
            if(level<2){
                var cityArea = document.getElementById("cityArea");
                cityArea.options.length = 1;
            }
            if(level<3){
                var countyArea = document.getElementById("countyArea");
                countyArea.options.length = 1;
            }
            if(level<4){
                var townArea = document.getElementById("townArea");
                townArea.options.length = 1;
            }
            if(level<5){
                var villageArea = document.getElementById("villageArea");
                villageArea.options.length = 1;
            }
        }

        /**
         * 获取最详细地址code
         * */
        function getDetailAreaCode(){
            var villageArea = $("#villageArea").val();//村code
            var townArea = $("#townArea").val();//镇code
            var countyArea = $("#countyArea").val();//县code
            var cityArea = $("#cityArea").val();//市code
            var provinceArea = $("#provinceArea").val();//省code
            var largeArea = $("#largeArea").val();//大区code
            if(villageArea!=null && villageArea!=""){
                return villageArea;
            }else if(townArea!=null && townArea!=""){
                return townArea;
            }else if(countyArea!=null && countyArea!=""){
                return countyArea;
            }else if(cityArea!=null && cityArea!=""){
                return cityArea;
            }else if(provinceArea!=null && provinceArea!=""){
                return provinceArea;
//            }else if(largeArea!=null && largeArea!=""){
//                return largeArea;
            }else{
                return "";
            }
        }

        $('#myForm').bootstrapValidator({
            message: 'This value is not valid',
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                largeArea: {
                    validators: {
                        notEmpty: true
                    }
                },
                provinceArea: {
                    validators: {
                        notEmpty: true
                    }
                },
                cityArea: {
                    validators: {
                        notEmpty: true
                    }
                }
            }
        });

        //关闭弹出框
        $("#closeModalButt").on("click",function(){
            window.parent.simpleCloseModal("add");
        });

    });

</script>
</body>
</html>